<template>
  <!-- 五星好评率★ -->
  <div class="rating-section" v-if="comments && comments.length > 0" @mouseover="toggleRatingSummary"
    @mouseleave="showRatingSummary = false">
    <div class="rating-stars">
      <span v-for="i in 5" :key="i" class="star-icon">
        <svg class="gw-rv-avg-rating__star" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
          viewBox="0 0 50 50" aria-labelledby="Average rating, star 3, full" role="presentation" fill="none">
          <title id="Average rating, star 3, full" lang="en">Average rating, star 3, full</title>
          <g stroke="" fill="">
            <path
              d="M22.475 6.46377C23.5062 4.3721 26.4875 4.3721 27.5187 6.46377L32.4312 16.4159L43.4167 18.0117C45.7229 18.3471 46.6437 21.1825 44.975 22.8096L37.025 30.5596L38.9021 41.4971C39.2979 43.795 36.8854 45.5471 34.8208 44.4637L24.9958 39.2971L15.173 44.4637C13.1105 45.5471 10.698 43.7971 11.0896 41.4971L12.9667 30.5596L5.01881 22.8096C3.35006 21.1846 4.27089 18.3471 6.57714 18.0117L17.5626 16.4159L22.475 6.46377Z"
              fill="currentColor"></path>
          </g>
        </svg>
      </span>
      <span class="review-count">{{ comments.length }} Reviews</span>
    </div>
    <div class="rating-summary" v-if="showRatingSummary">
      <div class="rating-header">
        <span class="rating-value">{{ averageRating }}/5</span>
        <span class="rating-text">Based on {{ comments.length }} reviews</span>
      </div>
      <div class="rating-bars">
        <div class="rating-bar-row" v-for="item in ratingData" :key="item.stars">
          <span class="rating-label">{{ item.stars }}<span class="star">★</span></span>
          <div class="rating-bar-container">
            <div class="rating-bar" :style="{ width: item.percentage + '%' }"></div>
          </div>
          <span class="rating-count">{{ item.count }}</span>
        </div>
      </div>
      <div class="rating-footer">
        <a href="#" class="view-all-reviews">See all reviews</a>
      </div>
    </div>
  </div>
  <!-- 无评论时的五星好评率★ -->
  <div v-else class="rating-section">
    <div class="rating-stars">
      <div>
        <span v-for="i in 5" :key="i" class="star-icon">
          <svg class="gw-rv-avg-rating__star-empty" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
            viewBox="0 0 50 50" aria-labelledby="This product has no reviews yet" role="presentation" fill="none">
            <title id="This product has no reviews yet" lang="en">This product has no reviews yet</title>
            <g stroke="" fill="">
              <path
                d="M22.475 6.4645C23.5062 4.37284 26.4875 4.37284 27.5187 6.4645L32.4312 16.4166L43.4167 18.0124C45.7229 18.3478 46.6437 21.1833 44.975 22.8103L37.025 30.5603L38.9021 41.4978C39.2979 43.7958 36.8854 45.5478 34.8208 44.4645L24.9958 39.2978L15.1729 44.4645C13.1104 45.5478 10.6979 43.7978 11.0896 41.4978L12.9667 30.5603L5.01875 22.8103C3.35 21.1853 4.27084 18.3478 6.57708 18.0124L17.5625 16.4166L22.475 6.4645V6.4645ZM24.9958 8.4145L20.2917 17.9478C20.0898 18.3564 19.7917 18.7098 19.423 18.9777C19.0543 19.2455 18.626 19.4197 18.175 19.4853L7.65417 21.0145L15.2667 28.4353C15.9292 29.0812 16.2313 30.0124 16.075 30.9249L14.2792 41.4041L23.6875 36.4562C24.0913 36.2438 24.5406 36.1328 24.9969 36.1328C25.4531 36.1328 25.9025 36.2438 26.3062 36.4562L35.7146 41.402L33.9187 30.9249C33.8416 30.4755 33.8748 30.0141 34.0156 29.5804C34.1565 29.1467 34.4006 28.7537 34.7271 28.4353L42.3396 21.0145L31.8187 19.4853C31.3678 19.4197 30.9395 19.2455 30.5708 18.9777C30.202 18.7098 29.9039 18.3564 29.7021 17.9478L24.9958 8.4145V8.4145Z"
                fill="currentColor"></path>
            </g>
          </svg>
        </span>
      </div>
      <span class="review-count">No reviews</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';

interface Props {
  comments: any[];
}

const props = defineProps<Props>();

// 评分摘要显示状态
const showRatingSummary = ref(false);

// 评分数据
const ratingData = ref<Array<{ stars: number; count: number; percentage: number }>>([]);

// 评分数据初始化
const initRatingData = () => {
  // 清空现有数据
  ratingData.value = [];

  if (!props.comments || props.comments.length === 0) {
    // 如果没有评论，添加默认空数据
    for (let i = 5; i >= 1; i--) {
      ratingData.value.push({
        stars: i,
        count: 0,
        percentage: 0
      });
    }
    return;
  }

  // 初始化评分计数
  const starCounts = [0, 0, 0, 0, 0]; // 索引0对应1星，索引4对应5星

  // 统计各星级评价数量
  props.comments.forEach((item: any) => {
    const score = Math.min(Math.max(Math.floor(item.score), 1), 5); // 确保分数在1-5之间
    starCounts[score - 1]++; // 对应星级计数加1
  });

  // 计算总评价数
  const total = props.comments.length;

  // 生成评分数据，从5星到1星排序
  for (let i = 5; i >= 1; i--) {
    const count = starCounts[i - 1];
    const percentage = total > 0 ? Math.round((count / total) * 100) : 0;

    ratingData.value.push({
      stars: i,
      count: count,
      percentage: percentage
    });
  }
};

// 总评价数
const totalReviews = computed(() => {
  return props.comments?.length || 0;
});

// 平均评分
const averageRating = computed(() => {
  if (!props.comments || props.comments.length === 0) return '0.0';

  const sum = props.comments.reduce((total: number, item: any) => {
    return total + (Math.min(Math.max(item.score || 0, 1), 5));
  }, 0);

  return (sum / props.comments.length).toFixed(1);
});

// 评分摘要显示状态
const toggleRatingSummary = () => {
  showRatingSummary.value = true;
};

// 监听props变化，重新计算评分数据
watch(() => props.comments, () => {
  initRatingData();
}, { deep: true });

// 组件挂载时初始化评分数据
onMounted(() => {
  initRatingData();
});
</script>

<style lang="scss" scoped>
/* 五星好评率样式 */
.rating-section {
  position: relative;
  margin-bottom: 10px;
}

.rating-stars {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.star-icon {
  color: #AE8877;
  font-size: 24px;
}

.gw-rv-avg-rating__star {
  color: #AE8877;
}

.review-count {
  margin-left: 8px;
  font-size: 18px;
  color: #555;
  font-weight: bold;
}

.rating-summary {
  position: absolute;
  top: 100%;
  left: 0;
  width: 320px;
  background: white;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  z-index: 100;
  border-radius: 4px;
}

.rating-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.rating-value {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

.rating-text {
  font-size: 13px;
  color: #555;
}

.rating-bars {
  margin-bottom: 10px;
}

.rating-bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.rating-label {
  width: 30px;
  font-size: 13px;
  color: #333;
  font-weight: bold;

  .star {
    position: relative;
    top: -1px;
    right: -1px;
  }
}

.rating-bar-container {
  flex: 1;
  height: 14px;
  background-color: #f0f0f0;
  margin: 0 10px;
  border-radius: 7px;
  overflow: hidden;
}

.rating-bar {
  height: 100%;
  background-color: #c29a8f;
  border-radius: 7px;
}

.rating-count {
  width: 25px;
  font-size: 13px;
  text-align: right;
  color: #555;
}

.rating-footer {
  text-align: center;
  margin-top: 15px;
}

.view-all-reviews {
  font-size: 13px;
  color: #000;
  text-decoration: none;
  font-weight: 500;
}

/* 移动端响应式样式 */
@media (max-width: 576px) {
  .rating-summary {
    width: 100%;
    max-width: 300px;
  }

  .rating-label {
    width: 25px;
    font-size: 12px;
  }

  .rating-count {
    width: 20px;
    font-size: 12px;
  }
}
</style>

export default {
  name: 'ProductRating',
  props: {
    comments: {
      type: Array,
      default: () => []
    }
  }
} 